<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue和axios一起使用</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/qs.min.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="updateMessage">获取内容</button>
    <button v-on:click="getSimpleUrl">传递简单参数</button>
    <button v-on:click="getJsonUrl">传递json参数</button>
    <button v-on:click="getObjUrl">传递对象参数</button>
    <p>{{  message  }}</p>
</div>
</body>
<script>

    /**
     * 说明:
     *      1. Qs的使用:
     *          - qs.stringify() 方法：将目标数据转换为string字符串
     *          - qs.parse() 方法：将对象字符串格式的数据转换为对象格式
     */
    let app1 = new Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        methods: {
            updateMessage: function () {
                let vueInstance = this;
                let params = {
                    ids: [1, 2]
                };
                axios.post("http://localhost:29001/json/view4", params).then(function (response) {
                    //注意的是, 在axios内部的this对象并不是外部的vue实例对象
                    console.log(response);
                    vueInstance.message = response.data;
                }, function (err) {
                    console.log(err);
                });
            },
            getSimpleUrl: function () {
                let param = {
                    id: 1
                };
                axios.post("http://localhost:29001/api/axios/simple/param", Qs.stringify(param)).then(function (response) {
                    console.log(response.data);
                }, function (err) {
                    console.log(err);
                });
            },
            getJsonUrl: function () {
                let param = {
                    id: 1,
                    ekAddress: '香湖湾'
                };
                // 默认就会把参数转换为json
                axios.post("http://localhost:29001/api/axios/json/param", param).then(function (response) {
                    console.log(response.data);
                }, function (err) {
                    console.log(err);
                });
            },
            getObjUrl: function () {
                let param = {
                    id: 1,
                    ekAddress: '香湖湾2'
                };
                // 默认就会把参数转换为json, 这种对应Content-Type: application/x-www-form-urlencoded的请求
                axios.post("http://localhost:29001/api/axios/obj/param", Qs.stringify(param)).then(function (response) {
                    console.log(response.data);
                }, function (err) {
                    console.log(err);
                });
                // 这种对应Content-Type: application/json;charset=UTF-8的请求
                axios.post("http://localhost:29001/api/axios/obj/param", param).then(function (response) {
                    console.log(response.data);
                }, function (err) {
                    console.log(err);
                });
            }
        }
    });

</script>
</html>